import React, { useState, useEffect } from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

function SpeechToText() {
    // const [result, setResult] = useState('');
    // const [isRecognizing, setIsRecognizing] = useState(false);
    // const [duration, setDuration] = useState(0);
    const {transcript, listening, resetTranscript } = useSpeechRecognition();
    const a = useSpeechRecognition();
    useEffect(() => {
        console.log(a);

        SpeechRecognition.start({
            continuous: true,
            lang: 'zh-CN',
        });

        SpeechRecognition.onResult((event) => {
            setResult(event.results[0][0].transcript);
        });

        SpeechRecognition.onEnd(() => {
            setIsRecognizing(false);
            setDuration(new Date() - startTime);
        });

        return () => {
            SpeechRecognition.stop();
        };
    }, []);

    // const startTime = new Date();
    const stop = () => {
        SpeechRecognition.stopListening();
        console.log(transcript);
        console.log(listening);

    }
    console.log(listening);
    return (
        <div>
            {/* {isRecognizing && <h2>正在识别...</h2>}
            <h2>{result}</h2>
            {!isRecognizing && <h2>点击开始说话</h2>}
            <button onClick={() => SpeechRecognition.start()}>开始说话</button>
            {duration && <p>音频时长：{duration} 秒</p>} */}


            <button onClick={SpeechRecognition.startListening}>开始</button>
            <button onClick={() => stop()}>停止</button>
            <p>{transcript}</p>
            <button onClick={resetTranscript}>Reset</button>
            {/* 根据listening状态显示麦克风图标等 */}

        </div>
    );
}

export default SpeechToText;
